<html>
    <head>
        <title>如何定义porps</title>
    </head>
    <body>
        <script>
            
                    // 一、如何定义props
                    /*
                        props 可以是数组或对象，用于接收来自父组件的数据。

                        props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义验证和设置默认值。


                                定义一个属性包含以下选项：
                                
                                
                                        选项                 类型                                                                  说明

                                        type:              String、Number、Boolean、Array、Object、Date、Function、Symbol           会检查一个 prop 是否是给定的类型，否则抛出警告
                                                        可以是任何自定义构造函数、或上述内容组成的数组。

                                        default:           any                                                                     为该 prop 指定一个默认值。如果该 prop 没有被传入，则换做用这个值。
                                                                                                                                对象或数组的默认值必须从一个工厂函数返回。

                                        required           Boolean                                                                 定义该 prop 是否是必填项

                                        validator          Function                                                                自定义验证函数会将该 prop 的值作为唯一的参数代入。
                                                                                                                           在非生产环境下，如果该函数返回一个 false 的值 (也就是验证失败)，一个控制台警告将会被抛出


                                eg:

                                        <template>
                                            <view>
                                                -- 我是子组件componentA --
                                                <view>{{age}}</view>
                                            </view>
                                        </template>
                                        <script>
                                            export default {
                                                props: {
                                                    // 检测类型 + 其他验证
                                                    age: {
                                                        type: Number, 
                                                        default: 0,
                                                        required: true,
                                                        validator: function(value) {
                                                            return value >= 0
                                                        }
                                                    }
                                                }
                                            }
                                        <//script>


                                        // 使用上面定义的组件
                                        <template>
                                            <view>
                                                -- 我是父组件 --
                                                <componentA :age="10"></componentA>
                                            </view>
                                        </template>
                    */

        </script>
    </body>
</html>